<template>
  <header>
    <el-button type="primary" color="#0F6CBD" @click="enterCreateMailPage">新邮件</el-button>
    <el-button type="primary" color="#0F6CBD" @click="enterCreateNoticePage">新公告</el-button>
  </header>
  <section>
    <div class="section-left">
      <el-col :span="12">
        <h5 class="mb-2">消息列表</h5>
        <el-menu router default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Message />
              </el-icon>
              <span>邮件</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/info/mailr">收件箱</el-menu-item>
              <el-menu-item index="/info/mails">已发送邮件</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="/info/notice">
            <el-icon>
              <MessageBox />
            </el-icon>
            <span>公告</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div class="section-right">
      <router-view></router-view>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    enterCreateMailPage() {
      this.$router.push({ path: '/info/mail/create' })
    },
    enterCreateNoticePage() {
      this.$router.push({ path: '/info/notice/create' })
    },
  },
}
</script>

<style scoped>
header {
  height: 40px;
  width: 100%;
  /* background-color: rgb(15, 108, 189); */
  border-radius: 5px;
  box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 5px;
}

section {
  width: 100%;
  height: 670px;
  margin-top: 10px;
  border-radius: 5px;
  display: flex;
}

.section-left {
  flex: 1;
  background-color: rgb(245, 245, 245);
}

.section-right {
  flex: 4;
  padding: 10px;
  background-color: rgb(245, 245, 245);
  border-left: 1px solid #E0E0E0;
}

.el-col-12 {
  max-width: 100%;
}

.el-menu {
  --el-menu-bg-color: rgb(245, 245, 245);
  border-right: none;
}
</style>